<template>
  <div ref="lalalaRef">InjectTest: {{input1}}</div>
</template>

<script lang="ts">
import { defineComponent, inject, onMounted, ref } from 'vue'

const InjectTest = defineComponent({
  setup () {
    // 模板引用ref, 注意，ref泛型中接收的必须是类型，defineComponent返回的是实例
    // TODO: 使用类来定义组件
    const lalalaRef = ref<HTMLDivElement | null>(null)

    onMounted(() => {
      if (lalalaRef.value) {
        console.log('DOMRef:', lalalaRef.value)
      }
    })

    // 通过defaultValue类型来推断类型
    const input1 = inject('input1', '')
    console.log(input1)
    return {
      input1,
      lalalaRef
    }
  },
  name: 'InjectTest'
})
export default InjectTest
</script>

<style scoped>

</style>
